
import React from 'react'
import { Input, Row, Col, Card } from 'antd';
import { SearchOutlined } from '@ant-design/icons';
import GeneralTitle from './GeneralTitle'
import DesignBanner from './Banner';
import Html from '@/assets/images/fs_html.png'
import Recommend from './Recommend';
const DesignHome = () => {
    const onSearch = (value: string) => {

    }
    return (
        <>
            <div className='container-fluid'>
                <div className='main-banner' style={{ width: '100%' }}>
                    <DesignBanner ></DesignBanner>
                </div>
                <div className='main-link'>
                    <div className='main-logo'>
                        <img src="https://www.doupir.com/wp-content/themes/d/images/logo2.svg" alt="logo" />
                        <h3>设计网站</h3>
                    </div>
                    <div className='search'>
                        <Input prefix={<SearchOutlined style={{ fontSize: 20, color: '#ccc' }} />} placeholder="搜索素材" size="large" bordered={false} />
                    </div>
                    <div className='nav-link'>
                        <ul className='nav-link-ul'>
                            <li className='nav-link-item'>后台</li>
                            <li className='nav-link-item'>插画</li>
                            <li className='nav-link-item'>电商</li>
                            <li className='nav-link-item'>金融</li>
                            <li className='nav-link-item'>教育</li>
                            <li className='nav-link-item'>数据</li>
                            <li className='nav-link-item'>社交</li>
                            <li className='nav-link-item'>医疗</li>
                            <li className='nav-link-item'>直播</li>
                            <li className='nav-link-item'>健身</li>
                            {/* <li className='nav-link-item'>游戏</li> */}
                        </ul>
                    </div>
                    <div className='mini-card'>
                        <Row gutter={20}>
                            <Col span={4}>
                                <Card >
                                    <img src={Html} alt="HTML5" />
                                </Card>
                            </Col>
                            <Col span={4}>
                                <Card >
                                    <img src={Html} alt="HTML5" />
                                </Card>
                            </Col>
                            <Col span={4}>
                                <Card >
                                    <img src={Html} alt="HTML5" />
                                </Card>
                            </Col>
                            <Col span={4}>
                                <Card >
                                    <img src={Html} alt="HTML5" />
                                </Card>
                            </Col>
                            <Col span={4}>
                                <Card >
                                    <img src={Html} alt="HTML5" />
                                </Card>
                            </Col>
                            <Col span={4}>
                                <Card >
                                    <img src={Html} alt="HTML5" />
                                </Card>
                            </Col>
                        </Row>
                    </div>
                    <div className='large-card'>
                        <Row gutter={20} justify="center">
                            <Col xs={6} sm={6} md={6} lg={6} xl={4} xxl={4}>
                                <Card >
                                    <img src={Html} alt="HTML5" />
                                </Card>
                            </Col>
                            <Col xs={6} sm={6} md={6} lg={6} xl={4} xxl={4}>
                                <Card >
                                    <img src={Html} alt="HTML5" />
                                </Card>
                            </Col>
                            <Col xs={6} sm={6} md={6} lg={6} xl={4} xxl={4}>
                                <Card >
                                    <img src={Html} alt="HTML5" />
                                </Card>
                            </Col>
                            <Col xs={6} sm={6} md={6} lg={6} xl={4} xxl={4}>
                                <Card >
                                    <img src={Html} alt="HTML5" />
                                </Card>
                            </Col>
                        </Row>
                    </div>
                </div>
                <div className='main-content'>
                    {/* 推荐 */}
                    <Recommend />

                </div>
            </div>
        </>
    )
}


export default DesignHome;
